<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>1111</div>
        <h1>{{msg1}}</h1>
        <div>{{msg1}}</div>
        <div>asxasxasxas</div>
        <div>{{num==52?"是":"否"}}</div>
        <!-- 以v-开头得在vue里叫做指令，一些vue封装好的快捷操作 -->
        <!-- :可以让后边得字符串变成data里绑定得变量
        如果就是要写一个字符串就把：删掉 -->
        <h3 :title="num">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </h3>
        <!-- v-if后面得值如果为真就渲染当绑定v-if 得dom节点，为假就不去创建这个dom节点 -->
        <p v-if=true>现在你看到我了</p>
        <div v-for="(item,index) in todos" key="index">{{item.text}}</div>
        <hr>
        <input type="text" v-model="val">
        <!-- v-model叫做数据的双向绑定 -->
         <span>{{val}}</span>

        
          <div v-else>
            Not A/B/C
          </div>
          <hr>
          <div v-if=false>11111</div>
          <div v-show=true>元苏</div>>
          <!-- v-if元素的创建创建与不创建 -->
          <!-- v-show：对display：none，和block得一层封装 -->
          <hr>
          <div v-if="type=='A'">A</div>
         
          <div v-else-if="type=='B'">XIAOb</div>
          <!-- v-if和v-else找最相邻得变成一对 -->
          <div v-else-if="type=='C'">dabi</div>

          <div v-else>啥都不是</div>
         <hr>
         v-html几乎不怎么使用，还是使用{{}}
         <div v-html="message"></div> 
         <div v-text="message"></div>
         <!-- <div v-on:click="counter += 1">请点击我,{{counter}}</div> -->
         <button @click="divclick(3,5)">{{counter}}</button>
    </div>


    <!-- 下一行就是引入了vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        // vue ，读音view是一个前端框架，对原生js得一个封装，他比原生js简单，
        // vue 主张操作数据，统计数据来修改dom，只需要关注数据，不需要怎么去操作dom
        Vue.component('todo-item', {
            template: '<li>这是个待办项</li>'
        })
    
        var app = new Vue({
            el: '#app', // 在#app里的div就可以使用vue得语法了
            data: {
                message: "<i>Hello Vue!</i>",
                msg1: "2003c",
                num: 53,
                seen: true,
                todos: [{
                        text: '学习 JavaScript'
                    },
                    {
                        text: '学习 Vue'
                    },
                    {
                        text: '整个牛项目'
                    }
                ],
                val:"" ,// 这个变量就代表着input框里输入得值
                type: "B",
                counter:0
            },
            methods: { // methods里定义方法，即点击或者其他动作执行得函数
               divclick(data,data1){
                  console.log(data,data1)
                  this.counter +=  data
               }
            },
            
          
        })
      
      

    </script>
</body>

</html>